<template>
	<view class="suoyou">
		<!-- 图片 -->
		<view class="container">
			<view class="img">
				<image :src="'http://localhost:3001/images/'+pointsDate.images" mode=""></image>
			</view>
			<!-- 卡券文字 -->
			<text class="wenben">
				{{pointsDate.couponName}}
			</text>
			<!-- 积分下部分 -->
			<view class="jifen_buttom">
				<view class="">
					<text class="zhi">{{pointsDate.lifespan}}</text>
					<text>积分</text>
				</view>
				<text class="zhio">剩{{pointsDate.count}}张</text>
			</view>
		</view>
		<!-- 文字 -->
		<view class="container-wenzi">
			<text>兑换须知</text>
			<text>1.代金券无门槛使用，兑换后立即生效，有效期为7天；2.此活动仅限会员参与，秒杀兑换次数不限；3.单笔订单仅限使用一张优惠券；
			4.会员积分秒杀成功后，优惠券将自动存入会员券包中；5.未使用的优惠券和已扣减的积分不予退回；6.此活动不与其他折扣活动同享。</text>
		</view>
		<!-- 按钮 -->
		<view class="anniu">
			<button>立即兑换</button>
		</view>

	</view>
</template>

<script setup>
	//导入部分
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue";
	
	let pointsDate = ref({});
	//生命周期发送请求
	onLoad(async (option) => {
		let data = await JSON.parse(decodeURIComponent(option.data));
		console.log("111111111",data);
		pointsDate.value = data[0];
		// console.log(filmsDate.value);
	})
</script>

<style>
	.suoyou{
		background-color: #f8f8f8;
	}
	.img {
		width: 700rpx;
		height: 700rpx;
	}

	image {
		width: 700rpx;
		height: 700rpx;
	}

	.container {
		margin-top: 30rpx;
		margin-left: 25rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		width: 700rpx;
		height: 850rpx;
	}
	.container-wenzi{
		margin-top: 30rpx;
		margin-left: 25rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		width: 700rpx;
		height: 400rpx;
	}
	.container-wenzi>text:nth-child(1){
		font-size: 32rpx;
		width: 680rpx;
		margin-left: 50rpx;
		margin-right: 520rpx;
		margin-top: 30rpx;
		line-height: 70rpx;
		font-weight: 500;
		color: #4d4d4d;
	}
	.container-wenzi>text:nth-child(2){
		color: #4d4d4d;
		width: 600rpx;
		height: 100%;
		margin-left: 50rpx;
		margin-right: 520rpx;
		margin-top: 30rpx;
		line-height: 10rpx;
		font-weight: 500;
	}
	
	.wenben {
		width: 100%;
		height: 30rpx;
		line-height: 70rpx;
		margin-left: 25rpx;
		font-size: 35rpx;
		font-weight: 550;
		margin-top: 30rpx;
	}

	.jifen_buttom {
		display: flex;
		justify-content: space-evenly;
		margin-top: 10rpx;
	}
	.zhi{
		font-size: 40rpx;
		color: #0550c8 ;
		font-weight: 600;
		margin-right: 5rpx;
	}

	.zhio {
		font-size: 28rpx;
		color: #c5c5c5;
		margin-left: 400rpx;
	}
	/* 按钮 */
	.anniu{
		width: 100%;
		height: 100rpx;
		background-color: #f8f8f8;
		position: sticky;
		bottom: 0;
		margin: auto;
	}
	button {
		margin: auto;
		padding: 0rpx;
		height: 75rpx;
		width: 720rpx;
		border-radius: 40rpx;
		background-color: #0550c8;
		font-size: 28rpx;
		color: #ffffff;
	}
	
	
</style>
